<template>
  <el-drawer :model-value="visible" title="批量关联公区锁" :size="mobile ? '100%' : 350" append-to-body lock-scroll @close="handleClose">
    <el-input
      v-model="searchStr"
      placeholder="搜索可关联的设备"
      clearable
      style="width: 240px"
      @keyup.enter="handleQuery"
    >
      <template #append>
        <el-button :icon="Search" @click="handleQuery" />
      </template>
    </el-input>
    <div v-loading="loading" class="mt20">
      <template v-if="publiLockList.length > 0">
        <div class="primary-section" v-for="item in publiLockList" :key="item.lockId">
          <el-row>
            <el-col :span="20"><span>{{ item.lockAlias }}</span></el-col>
            <el-icon
              style="margin-left: auto;cursor: pointer;"
              size="18px"
              color="var(--el-color-primary-light-3)"
              @click="handleAddLock(item.lockId)"
            >
              <CirclePlusFilled />
            </el-icon>
          </el-row>
        </div>
      </template>
      <el-empty v-else description="暂无可关联的设备" />
    </div>
  </el-drawer>
</template>
<script setup name="BatchLock">
import { Search } from '@element-plus/icons-vue'
import useAppStore from '@/store/modules/app'

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const searchStr = ref('')
const loading = ref(false)
const publiLockList = ref([])
const mobile = computed(() => useAppStore().device === 'mobile')

watch(() => props.visible, (value) => {
  if (value) {
    searchStr.value = ''
    publiLockList.value = []
  }
})

// 搜索公区锁
function handleQuery() {
  console.log('搜索公区锁:>>>', searchStr.value)
  getList()
}
// 关联公区锁
function handleAddLock(lockId) {
  console.log('关联公区锁id:>>>', lockId);
}

function handleClose() {
  emit('cancel')
}

function getList() {
  loading.value = true
  setTimeout(() => {
    publiLockList.value = [{
      lockAlias: '朝花夕拾大门',
      lockId: 1,
      branchName: '分组名称'
    }, {
      lockAlias: '朝花夕拾后大门',
      lockId: 2,
      branchName: '分组名称'
    }]
    loading.value = false
  }, 500)
}
// getList()
</script>
<style lang="scss" scoped>

</style>